<template>
  <div class="distribution-auditting-set gray-box top-redius border-bottom-gray">
    <div class="title">{{$t('distribution.applicationConditionSetting')}}</div>
    <el-form
      ref="dataForm"
      :model="dataForm"
      :rules="rules"
      :label-width="this.$i18n.t('language') === 'language' ? '240px' : '100px'"
      class="set-form"
      size="mini"
    >
      <el-form-item :label="$t('distribution.conditionalAuditJudgment')">
        <el-radio-group v-model="dataForm.autoCheck" @change="changeRadio(dataForm.autoCheck)">
          <el-radio :label="0">{{$t('distribution.manualJudgment')}}</el-radio>
          <el-radio :label="1">{{$t('distribution.systemJudgment')}}</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item :label="$t('distribution.applicationConditions')" v-if="dataForm.autoCheck === 1">
        <!-- <div class="condition-item">
          <el-checkbox  disabled>验证手机号</el-checkbox>
          <span class="tips">选择多个条件时，需同时满足</span>
        </div>-->

        <!-- <div class="condition-item">
          <el-checkbox v-model="dataForm.auditingConditions.isFocus">关注公众号</el-checkbox>
        </div>-->
        <div class="condition-item">
          <el-checkbox v-model="isProd">{{$t('distribution.purchaseDesignatedGoods')}}</el-checkbox>
          <el-button plain @click="prodsSelectHandle" v-if="isProd">{{$t('product.select')}}</el-button>
          <span class="tips">{{$t('distribution.buyConditionTip2')}}</span>
          <el-row v-if="isProd">
            <div
              style="margin: 5px 10px 0px 0px;float:left"
              v-for="(discountProd,index) in dataForm.auditingConditions.productDtoList"
              :key="index"
            >
              <el-card :body-style="{ padding: '0px' }" style="height: 160px;width: 120px">
                <img :src=" discountProd.pic" style="height:104px;width:100%" />
                <div class="card-prod-bottom">
                  <span class="card-prod-name">{{discountProd.prodName}}</span>
                  <el-button
                    type="text"
                    class="card-prod-name-button"
                    @click="deleteProd(index)"
                  >{{$t('remindPop.delete')}}</el-button>
                </div>
              </el-card>
            </div>
          </el-row>
        </div>

        <div class="condition-item input-group">
          <el-checkbox
            v-model="isExpenseNumber"
            @change="removeExpenseNumber"
            class="input-checked"
          >{{$t('distribution.bcTip3')}}</el-checkbox>
          <el-form-item prop="expenseNumber">
            <el-input
              type="number"
              @change="checkNumber"
              min="1"
              v-model="dataForm.auditingConditions.expenseNumber"
              style="width:240px"
              v-bind:disabled="!isExpenseNumber"
            >
              <template slot="append">{{$t('distribution.bcTip4')}}</template>
            </el-input>
          </el-form-item>
          <span class="tips">{{$t('distribution.bcTip5')}}</span>
        </div>

        <div class="condition-item input-group">
          <el-checkbox
            v-model="isExpenseAmount"
            @change="removeExpenseAmount"
            class="input-checked"
          >{{$t('distribution.dbcTip1')}}</el-checkbox>
          <el-form-item prop="expenseAmount">
            <el-input
              type="number"
              min="0"
              @change="checkAmount"
              v-model="dataForm.auditingConditions.expenseAmount"
              style="width:240px"
              v-bind:disabled="!isExpenseAmount"
            >
              <template slot="append">{{$t('coupon.yuan')}}</template>
            </el-input>
          </el-form-item>
          <span class="tips">{{$t('distribution.dbcTip3')}}</span>
        </div>
      </el-form-item>

      <el-form-item :label="$t('distribution.applyNeedInfo')">
        <!-- <el-checkbox v-model="dataForm.auditingInfo.userMobile">绑定手机</el-checkbox> -->
        <el-checkbox v-model="dataForm.auditingInfo.realName">{{$t('distribution.realName')}}</el-checkbox>
        <el-checkbox
          v-model="dataForm.auditingInfo.identityCardNumber"
        >{{$t('distribution.idCardNo')}}</el-checkbox>
        <el-checkbox
          v-model="dataForm.auditingInfo.identityCardPic"
        >{{$t('distribution.idCardPhoto')}}</el-checkbox>
      </el-form-item>
    </el-form>
    <!-- 商品选择弹窗-->
    <prods-select
      v-if="prodsSelectVisible"
      ref="prodsSelect"
      @refreshSelectProds="selectDistributionProds"
    ></prods-select>
    <el-button @click="dataFormSubmit()">{{$t('distribution.save')}}</el-button>
  </div>
</template>

<script>
import ProdsSelect from '@/components/prods-select'
export default {
  components: {
    ProdsSelect
  },
  created () {
    this.getData()
  },
  methods: {
    // 获取数据
    getData () {
      this.dataListLoading = true
      this.$http({
        url: this.$http.adornUrl('/distribution/distributionAuditingSet/info'),
        method: 'get'
      }).then(({ data }) => {
        if (data) {
          this.setDate(data)
        }
        this.dataListLoading = false
      })
    },
    // 设置数据
    setDate (data) {
      this.dataForm = data
      if (this.dataForm.auditingConditions.productDtoList == null) {
        this.dataForm.auditingConditions.productDtoList = []
      }
      if (this.dataForm.auditingConditions.expenseNumber > 0) {
        this.isExpenseNumber = true
      }
      if (this.dataForm.auditingConditions.expenseAmount > 0) {
        this.isExpenseAmount = true
      }
      if (this.dataForm.auditingConditions.prodList != null && this.dataForm.auditingConditions.prodList.length > 0) {
        this.isProd = true
      }
    },
    /**
     * 消费次数上限校验
     */
    checkNumber () {
      // let inNumber = parseInt(this.dataForm.auditingConditions.expenseNumber)
      let inNumber = Math.round(parseInt(this.dataForm.auditingConditions.expenseNumber))
      if (inNumber < 1) {
        this.dataForm.auditingConditions.expenseNumber = 1
      } else {
        this.dataForm.auditingConditions.expenseNumber = inNumber > 1000 ? 1000 : inNumber
      }
    },
    /**
     * 消费金额校验
     */
    checkAmount () {
      let inAmount = parseFloat(this.dataForm.auditingConditions.expenseAmount).toFixed(2)
      if (inAmount < 0) {
        this.dataForm.auditingConditions.expenseAmount = 0
      } else {
        this.dataForm.auditingConditions.expenseAmount = inAmount > 10000 ? 10000 : inAmount
      }
    },
    /**
     * 切换选项数据初始化
     */
    changeRadio (autoCheck) {
      if (autoCheck === 0) {
        this.isProd = false
        this.dataForm.auditingConditions.productDtoList = []
        this.isExpenseNumber = false
        this.dataForm.auditingConditions.expenseNumber = null
        this.isExpenseAmount = false
        this.dataForm.auditingConditions.expenseAmount = null
      }
    },
    // 提交表单
    dataFormSubmit () {
      let auditingCondition
      if (this.dataForm.auditingConditions) {
        auditingCondition = JSON.parse(JSON.stringify(this.dataForm.auditingConditions))
        let prodList = []

        if (auditingCondition.productDtoList && this.isProd) {
          auditingCondition.productDtoList.forEach(element => {
            prodList.push(element.prodId)
          })
        }
        auditingCondition.prodList = prodList
        auditingCondition.productDtoList = undefined
        if (this.isProd && auditingCondition.prodList.length <= 0) {
          this.$message({
            message: this.$i18n.t('marketing.pleaseSelectAProduct'),
            type: 'error',
            duration: 1500
          })
          return
        }
        if (!this.isProd) {
          auditingCondition.prodList = []
        }
      }
      if (this.dataForm.auditingConditions.expenseNumber === '.' || this.dataForm.auditingConditions.expenseNumber === '-' || this.dataForm.auditingConditions.expenseAmount === '.' || this.dataForm.auditingConditions.expenseAmount === '-') {
        return
      }
      if (this.isExpenseNumber && !this.dataForm.auditingConditions.expenseNumber) {
        this.$message({
          message: this.$i18n.t('distribution.errorIntegerTip1'),
          type: 'error',
          duration: 1500
        })
        return
      }
      if (this.isExpenseAmount && !this.dataForm.auditingConditions.expenseAmount) {
        this.$message({
          message: this.$i18n.t('distribution.decimalTip1'),
          type: 'error',
          duration: 1500
        })
        return
      }
      if (this.dataForm.autoCheck === 1) {
        if (!this.isExpenseNumber && !this.isProd && !this.isExpenseAmount) {
          this.$message({
            message: this.$i18n.t('distribution.systemJudgmentTips'),
            type: 'error',
            duration: 1500
          })
          return
        }
      }
      this.$http({
        url: this.$http.adornUrl(`/distribution/distributionAuditingSet`),
        method: 'put',
        data: this.$http.adornData({
          'auditingSetId': this.dataForm.auditingSetId,
          'auditingConditions': auditingCondition,
          'auditingInfo': this.dataForm.auditingInfo,
          'autoCheck': this.dataForm.autoCheck
        })
      }).then(({ data }) => {
        this.$message({
          message: this.$i18n.t('publics.operation'),
          type: 'success',
          duration: 1500
        })
      }).catch(() => {

      })
    },

    // 清除消费次数数据
    removeExpenseAmount () {
      this.dataForm.auditingConditions.expenseAmount = null
    },
    // 清除消费金额数据
    removeExpenseNumber () {
      this.dataForm.auditingConditions.expenseNumber = null
    },
    // 显示添加指定商品弹框
    prodsSelectHandle () {
      this.prodsSelectVisible = true
      if (!this.dataForm.auditingConditions.productDtoList) {
        this.dataForm.auditingConditions.productDtoList = []
      }
      this.$nextTick(() => {
        this.$refs.prodsSelect.init(this.dataForm.auditingConditions.productDtoList)
      })
    },
    // 商品选择回调
    selectDistributionProds (prods) {
      if (prods) {
        this.dataForm.auditingConditions.productDtoList = []
        for (var i in prods) {
          this.dataForm.auditingConditions.productDtoList.push(prods[i])
        }
      }
    },
    // 删除指定商品
    deleteProd (index) {
      this.dataForm.auditingConditions.productDtoList.splice(index, 1)
    }
  },
  data () {
    // 消费次数校验规则
    var isExpenseNumber = (rule, value, callback) => {
      if (!this.isexpense_number) {
        callback()
      }
      if (!Number.isInteger(value)) {
        callback(new Error(this.$i18n.t('distribution.errorIntegerTip1')))
        return
      }
      if (parseInt(value) > 1000) {
        callback(new Error(this.$i18n.t('distribution.errorIntegerTip2')))
        return
      }
      if (parseInt(value) <= 0) {
        callback(new Error(this.$i18n.t('distribution.errorIntegerTip3')))
        return
      }
      callback()
    }
    // 消费金额校验规则
    var isExpenseAmount = (rule, value, callback) => {
      if (!this.isexpense_amount) {
        callback()
      }
      // eslint-disable-next-line no-useless-escape
      var reg = /^(([0-9]+[\.]?[0-9]{1,2})|[1-9])$/
      if (!reg.test(value)) {
        callback(new Error(this.$i18n.t('distribution.decimalTip1')))
        return
      }
      if (parseFloat(value) > 10000) {
        callback(new Error(this.$i18n.t('distribution.decimalTip2')))
        return
      }
      callback()
    }
    return {
      prodsSelectVisible: false,
      resourcesUrl: window.SITE_CONFIG.resourcesUrl,
      // 表单数据
      // 是否指定商品
      isProd: false,
      // 是否指定用户
      isUser: false,
      // 是否指定单数
      isExpenseNumber: false,
      // 是否指定消费
      isExpenseAmount: false,
      dataForm: {
        // 申请条件
        'auditingConditions': {
          'isMobile': 0,
          'isFocus': 0,
          'userList': [],
          'prodList': [],
          'productDtoList': [],
          'expenseNumber': null,
          'expenseAmount': null
        },
        'auditingInfo': {
          'userMobile': false,
          'identityCardNumber': false,
          'realName': false,
          'identityCardPic': false
        },
        'autoCheck': 1
      },
      prodData: [],
      // 表单校验条件
      rules: {
        name: [
          { required: true, message: this.$i18n.t('distribution.inputMicroGuestTip1'), trigger: 'blur' },
          { min: 1, max: 6, message: this.$i18n.t('distribution.limitTips'), trigger: 'blur' }
        ],
        expenseNumber: [
          { validator: isExpenseNumber, trigger: 'blur' }
        ],
        expenseAmount: [
          { validator: isExpenseAmount, trigger: 'blur' }
        ]

      }
    }
  }
}
</script>
<style lang="scss">
.distribution-auditting-set {
  .condition-item {
    margin-bottom: 10px;
  }
  .mod-marketing-distribution .valid-input {
    margin-left: 0px;
  }
  .input-group .el-form-item--mini {
    display: inline-block;
  }
  .input-checked {
    margin-right: 10px;
  }
}
</style>
